<template>
	<div class="body">
		<div class="header">
			<router-link to="/mylvmama">
				<span class="after"></span>
			</router-link>
			会员登录
		</div>
		<div class="click">
			<div :class="bg1" @click="click1">普通登录</div>
			<div :class="bg2" @click="click2">手机动态密码登录</div>
		</div>
		<div class="content" v-show="show">
			<ul class="content_text">
				<li>
					<input type="text" placeholder="请输入邮箱/手机号/用户名">
				</li>
				<li>
					<input type="text" placeholder="请输入密码"><i></i>
				</li>
				<li>
					<input type="text" placeholder="请输入右侧图形验证码"><img src="static/loginimg/rest.jpg">
				</li>
			</ul>
			<div class="content_a" >
				<a href="">忘记密码?</a>
				<a href="">快速注册></a>
			</div>
			<button>登录</button>
		</div>

		<div class="content content2" v-show="hied">
			<ul class="content_text">
				<li>
					<input type="text" placeholder="请输入11位手机号码">
				</li>
				<li>
					<input type="text" placeholder="请输入右侧图形验证码"><img src="static/loginimg/rest.jpg">
				</li>
				<li>
					<input type="text" placeholder="请输入短信验证码"><a href="">发送验证码</a>
				</li>
			</ul>
			<div class="content_a">
				<a href="">忘记密码?</a>
				<a href="">快速注册></a>
			</div>
			<button>登录</button>
			<div class="ture">
				<div>
					<i></i><span>同意驴妈妈旅游网</span>
				</div>
				<a href="">会员服务条款</a>
			</div>
		</div>

		<div class="bottom">
			<div class="line">其它方式登录</div>
			<div class="log">
				<a href="">
					<img src="static/loginimg/lg_sina.png">
				</a>
				<a href="">
					<img src="static/loginimg/lg_qq.png">
				</a>
				<a href="">
					<img src="static/loginimg/lg_pay.png">
				</a>
			</div>
		</div>

		<img src="static/loginimg/lg_cloud.png" class="fixed">
	</div>
</template>
<script>
	export default{
		data(){
			return{
				show:true,
				hied:false,
				bg1:"fff",
				bg2:""
			}
		},
		methods:{
			click1(){
				this.show=true;
				this.hied=false;
				this.bg1="fff";
				this.bg2="";
			},
			click2(){
				this.show=false;
				this.hied=true;
				this.bg1="";
				this.bg2="fff";
			}
		},
		mounted(){
			document.body.scorllTop=0;
		}
	}

</script>

<style scoped>
.body{
	height: 100vh;
	background: url(../../../static/loginimg/spokeman-4.png)no-repeat;
	background-size: 100% 100%;
	margin: 0 auto;
}
.fixed{
	position: fixed;
	top: 1.266667rem;
	left: .45rem;
}
.header{
	position: relative;
	text-align: center;
	color: #fff;
	font-size: .5rem;
	line-height: 1.566667rem;
}
.header span{
	width: 1.066667rem;
    height: 1.066667rem;
    display: block;
    position: absolute;
    top: .25rem;
    left: .15rem;
    background: url(../../../static/loginimg/left.png)no-repeat center;
    background-size: 50%;
}
.click{
	margin: 0 auto;
	width: 90%;
	display: flex;
	flex-flow: nowrap;
	justify-content: space-around;
	border: 2px solid #fff;
	border-radius: 7px;
	font-size: .4rem;
	color: #fff;
	text-align: center;
}
.fff{
	background: #fff;
	color: #D30775;
}
.click div{
	padding: .2rem;
	width: 50%;
}
.content{
	margin: .6rem auto 0 auto;
	height: 6.666667rem;
	width: 90%;
}
.content_text{
	background: #f3bad9;
	border-radius: 10px;
	padding: 0rem .5rem;

}
.content_text li{
	height: 1.066667rem;
	border-bottom: 2px solid #aaa;
	padding: .3rem 0 .3rem .9rem;
	background: url(../../../static/loginimg/lg_lock.png)no-repeat left center;
	position: relative;
}
.content_text li:first-child{
	background: url(../../../static/loginimg/lg_person.png)no-repeat left center;
}
.content_text li:last-child{
	border: none;
	background: url(../../../static/loginimg/lg_code.png)no-repeat left center;
}
.content_text li input{
	outline: none;
}
.content_text li i{
	display: inline-block;
	width: 1.066667rem;
	height: 1.066667rem;
	position: absolute;
	right: 0;
	top :0;
	background: url(../../../static/loginimg/eye-grey.png)no-repeat center;
	background-size: 80%;
}
.content_text li img{
	position: absolute;
	right: 0;
	top : .2rem;
	height: .666667rem;
}
.content_text input{
	border: none;
	background: #f3bad9;
	font-size: .4rem;
}
.content_a{
	display: flex;
	justify-content: space-between;
}
.content_a a{
	color: #fff;
	font-size: .35rem;
	padding: .3rem 0;
}
button{
	width: 100%;
	background: #fff;
	font-size: .4rem;
	color: #D30775;
	outline: none;
	border-radius: 10px;
	padding: .2rem;
}
.none{
	display: none;
}

.content2 .content_text li{
	background: url(../../../static/loginimg/lg_phone.png)no-repeat left center;
}
.content2 .content_text li:nth-child(2){
	background: url(../../../static/loginimg/lg_code.png)no-repeat left center;
}
.content2 .content_text li:nth-child(3){
	background: url(../../../static/loginimg/lg_msg.png)no-repeat left center;
}
.content2 .content_text li:nth-child(3) a{
	position: absolute;
	right: 0;
	top: .2rem;
	width: 2rem;
	height: .666667rem;
	color: #fff;
	line-height: .666667rem;
	font-size: .3rem;
	text-align: center;
	background: #d30775;
	border-radius: 10px;
}
.ture{
	display: flex;
	justify-content: flex-start;
	padding: .4rem 0;
	line-height: .4rem;
}
.ture div{
	display: flex;
	align-items: center;
	color: #fff;
}
.ture div span{
	display: inline-block;
	margin: 0 .1rem;
}
.ture i{
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	border: 1px solid #fff;
	border-radius: 50%;
}
.ture a{
	color: blue;
}
.bottom{
	color: #fff;
	text-align: center;
	display: flex;
	flex-flow: wrap column;
	align-items: center;
}
.line{
	background: url(http://pics.lvjs.com.cn/mobile/node_pro/projects/login/static/images/lg_line.png)no-repeat center;
	background-size: 100%;
	width: 90%;
}
.log{
	display: flex;
	flex-flow: nowrap;
	justify-content: space-around;
	width: 100%;
	margin-top: .3rem;
}
</style>